<!--  -->
<template>
  <div>
    <div class="header-nav">
      <b-container>
        <b-navbar toggleable="md" type="light" variant="light">
          <b-navbar-brand to="home"><img src="/static/images/logo.svg"></b-navbar-brand>

          <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

          <b-collapse is-nav id="nav_collapse">
            <b-navbar-nav>
              <b-nav-item v-for="(item, index) in navItem" :to="item.href" :key="index">{{item.text}}</b-nav-item>
            </b-navbar-nav>
          </b-collapse>
        </b-navbar>
      </b-container>
    </div>

    <keep-alive>
        <router-view/>
    </keep-alive>

    <div class="footer-nav">
      <b-container>
        <b-row>
          <b-col xl="1">
            <p class="title">产品目录</p>
            <div class="link">
              <a v-for="i in 6" :key="i">私有云计算</a>
            </div>
          </b-col>
          <b-col xl="1" v-for="i in 4" :key="i" offset-xl="1">
            <p class="title">产品目录</p>
            <div class="link">
              <a v-for="i in 6" :key="i">私有云计算</a>
            </div>
          </b-col>
          <b-col xl="3" class="text-center">
            <div class="footer-right">
              <img src="static/images/foot-wx.jpg" alt="" class="w-100">
              <p>扫一扫关注我们</p>
              <b-row class="footer-img">
                <b-col cols="4">
                  <a href="http://weibo.com/azenui" target="_blank">
                    <img src="/static/images/icon-wb.png" alt="">
                  </a>
                </b-col>
                <b-col cols="4">
                  <a href="http://weibo.com/azenui" target="_blank">
                    <img src="/static/images/icon-wb.png" alt="">
                  </a>
                </b-col>
                <b-col cols="4">
                  <a href="http://weibo.com/azenui" target="_blank">
                    <img src="/static/images/icon-wb.png" alt="">
                  </a>
                </b-col>
              </b-row>
            </div>
          </b-col>
        </b-row>
      </b-container>
    </div>
    <div class="footer-info">
      <b-container >
        <p>
          版权所有：四彩云 © 2017 北京四彩云网络科技有限公司 京ICP备15006025号-3
          <a href="http://www.smallseashell.com/" target="_blank" title="小贝壳">技术支持：武汉珈研</a>
        </p>
      </b-container>
    </div>
  </div>
</template>

<script>
import {Navbar, Layout} from 'bootstrap-vue/es/components'

export default {
  name: 'main',

  components: {
    Navbar,
    Layout
  },

  data () {
    return {
      navItem: [{
        href: 'product',
        text: '产品与服务'
      }, {
        href: 'price',
        text: '价格'
      }, {
        href: 'case',
        text: '客户案例'
      }, {
        href: 'docs',
        text: '帮助文档'
      }, {
        href: 'joint',
        text: '合作伙伴'
      }, {
        href: 'blog',
        text: '技术博客'
      }, {
        href: 'about',
        text: '关于我们'
      }]
    }
  },

  mounted () {
    this.$router.push('home')
  },

  computed: {
  },

  methods: {}
}
</script>
<style lang='less' scoped>
  .header-nav {
    background: #f8f9fa!important;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .navbar-brand{
    img {
      width: 130px;
    }
  }
  .footer-nav {
    background: #021823;
    color: #dddee2;
    padding: 3rem 0;
    .ft12;

    .title {
      .ft16;
      border-bottom: 2px solid #00b5e5;
    }

    .link a {
      cursor: pointer;
      height: 0.7 * @1rem;
      line-height: 0.7 * @1rem;
      .block;
      .t-l;
      margin-bottom: 0.6 * @1rem;
      @media @max1200 {
        .inline-block;
        margin: 0 0.5 * @1rem;
      }
    }

    .row {
      &>div {
        @media @max1200 {
          margin-bottom: 1rem;
        }
      }
    }
  }
  .footer-right {
    .w-50;
    .fr;
    &>img {
      margin-bottom: 1rem;
    }
    .ft14;
    .footer-img {
      a {
        background: #666;
        border-radius: 50%;
        display: block;
        width: 1.5 * @1rem;
        height: 1.5 * @1rem;
      }
      img {
        width: 1 * @1rem;
        margin: 0.25 * @1rem;
      }
    }
    @media @max1200 {
      .fnone;
      .inline-block;
    }
  }
  .footer-info {
    .footer-nav;
    .bd-top(#10242f);
    padding: 2rem 0;
    .t-l;
    & p{
      color: #999;
      margin: 0;
      a {
        margin-left: 1rem;
        .white;
      }
    }
  }
</style>
